<template>
  <div>
    <el-table :data="tableData" style="width: 500px">
      <el-table-column prop="name" label="商品信息" align="center" />
      <el-table-column prop="sex" label="价格"  align="center" />
      <el-table-column prop="action" label="操作"  align="center">
        <template #header>
          <div class="flex">
            <span>操作</span>
            <el-icon class="cursor-pointer ml-10px" @click="handleAddGoods"><CirclePlus /></el-icon>
          </div>
        </template>
        <template #default="scope">
          <el-icon color="red" size="16" @click="handleRemoveTable(scope.row)"><Remove /></el-icon>
        </template>
      </el-table-column>
    </el-table>
    <AddGoodsModel ref="AddGoodsModelRef" @update-table="updateTable" />
  </div>
</template>
<script lang="ts" setup>
import AddGoodsModel from './addGoodsModel.vue'
const tableData = ref([])
const AddGoodsModelRef = ref(null)
const handleAddGoods = () => {
  AddGoodsModelRef.value.show(true)
}
const updateTable =(val) => {
  tableData.value = val
}
const handleRemoveTable = (row) => {
  tableData.value = tableData.value.filter(item => item.id !== row.id)
}
</script>
<style lang="scss" scoped></style>
